import { provide, reactive, inject, InjectionKey, computed } from 'vue';

const TooltipSymbol: InjectionKey<{
  state: {
    text: string;
    showTooltip: boolean;
    clientX: number;
    clientY: number;
  };
}> = Symbol('tooltip');

export function useTooltipProvider() {
  const state = reactive({
    text: '',
    showTooltip: false,
    clientX: 0,
    clientY: 0,
  });

  const computedStyle = computed(() => {
    return {
      top: `${state.clientY}px`,
      left: `${state.clientX}px`,
    };
  });
  provide(TooltipSymbol, {
    state,
  });

  return {
    state,
    computedStyle,
  };
}

export function useTooltipInjector() {
  return inject(TooltipSymbol, {
    state: {
      text: '',
      showTooltip: false,
      clientX: 0,
      clientY: 0,
    },
  });
}
